<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陪护订单</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/order.css" rel="stylesheet">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row m-t-sm animated fadeInUp">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>所有陪护订单</h5>
                        <div class="ibox-tools">
                            <a href="addOrder.html" class="btn btn-primary btn-xs">新增订单</a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="btn-group orderStatusTab">
                            <button class="btn btn-white" type="button">待支付订单</button>
                            <button class="btn btn-white" type="button">退款订单</button>
                            <button class="btn btn-white" type="button">正在服务</button>
                            <button class="btn btn-white" type="button">已完成订单</button>
                            <button class="btn btn-info" type="button">全部订单</button>
                        </div>
                        <div class="row m-b-md m-t-md search-form">
                            <div class="col-md-3 order-time">
                                <input placeholder="开始时间" class="form-control layer-date" id="start" >
                                <input placeholder="结束时间" class="form-control layer-date" id="end" >
                            </div>
                            <div class="col-md-2">
                                <select class="form-control" name="pay_status">
                                    <option value='0'>请选择支付方式</option>
                                    <option value='1'>未支付</option>
                                    <option value='2'>已支付</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <select class="form-control" name="source">
                                    <option value='0'>请选择订单来源</option>
                                    <option value='1'>线上</option>
                                    <option value='2'>线下</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <select class="form-control" name="payment">
                                    <option value='0'>请选择支付方式</option>
                                    <option value='1'>微信支付</option>
                                    <option value='2'>POS机</option>
                                    <option value='3'>现金</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                 <input type="text" placeholder="请输入搜索内容" class="form-control">
                            </div>
                            <div class="col-md-1">
                                 <button type="button" class="btn btn-sm btn-primary"> 搜索</button> </span>
                            </div>
                        </div>
                        <div class="project-list">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>支付状态</th>
                                        <th>订单编号</th>
                                        <th>护理对象</th>
                                        <th>联系电话</th>
                                        <th>服务类型</th>
                                        <th>订单来源</th>
                                        <th>下单时间</th>
                                        <th>服务时间</th>
                                        <th>支付方式</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody class='order-detail'>
                                    <tr>
                                        <td class="project-status">
                                            <span class="label label-primary">待支付
                                        </td>
                                        <td class="project-num">
                                            1234566545655
                                        </td>
                                        <td class="project-name">
                                            小红
                                        </td>
                                        <td class="project-phone">
                                            13265408362
                                        </td>
                                        <td class="project-type">
                                            住院陪护-普通陪护<br/>可自理
                                        </td>
                                        <td class="project-from">
                                            线下
                                        </td>
                                         <td class="project-from">
                                            2017/06/08 18:00
                                        </td>
                                         <td class="project-time">
                                            2017/06/08 18:00<br/>至2017/07/08 18:00
                                        </td>
                                         <td class="project-time">
                                           POS机
                                        </td>
                                        <td class="project-actions">
                                            <a href="order_detail.html" class="btn btn-white btn-sm"><i class="fa fa-folder"></i> 查看 </a>
                                        </td>
                                  </tr>
                            </tbody>
                        </table>
                   </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script>
        $(document).ready(function(){
            $(".search-form select").on("change",function(){
                changeColor($(this));
            })
            $(".search-form select").each(function(){
                changeColor($(this));
            })
            function changeColor(el){
                el.val()==0 ? el.addClass("no-select") : el.removeClass("no-select");
            }

            // 订单状态切换
            $(".orderStatusTab button").click(function(){
                $(this).removeClass("btn-white").addClass("btn-info");
                $(this).siblings().addClass("btn-white").removeClass("btn-info");
            })
        });
    </script>
</body>